<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<!--字体图标-->
	<link href="../../lib/javaex/pc/css/icomoon.css" rel="stylesheet" />
	<!--动画-->
	<link href="../../lib/javaex/pc/css/animate.css" rel="stylesheet" />
	<!--骨架样式-->
	<link href="../../lib/javaex/pc/css/common.css" rel="stylesheet" />
	<!--皮肤-->
	<link href="../../lib/javaex/pc/css/skin/default.css" rel="stylesheet" />
	<!--jquery，不可修改版本-->
	<script src="../../lib/javaex/pc/lib/jquery-1.7.2.min.js"></script>
	<!--核心组件-->
	<script src="../../lib/javaex/pc/js/javaex.min.js"></script>
	<!--表单验证-->
	<script src="../../lib/javaex/pc/js/javaex-formVerify.js"></script>
	<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/userAuth.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.body {
			min-width: 1200px;
			background-color: #E7EAED;
			min-height: 800px;
		}

		.container {
			width: 90%;
			background-color: #fff;
			margin: 20px auto 100px auto;
			box-shadow: 0 20px 30px 0 rgb(0 0 0 / 15%);
			min-height: 800px;

		}

		.table {
			padding: 0 20px 20px 20px;

			min-height: 700px;
		}

		.pager {
			position: initial;
			padding-bottom: 20px;
			padding-right: 30px;
		}

		#table {
			margin-top: 30px;
		}

		.title {
			width: 150px;
			height: 50px;
			background-color: #1B9AEE;
			text-align: center;
			font-size: 25px;
			padding-top: 5px;
			color: #fff;
		}
	</style>
</head>

<body class="body">
	<header>
		<div class="javaex-navbar">
			<div class="javaex-container-fluid clear">
				<!--logo名称-->
				<a href="../index.html">
					<div class="javaex-logo" style="color: #fff;">九美阁商城</div>
				</a>
				<!--左侧导航-->
				<ul class="javaex-nav fl">
					<li class="active"><a href="javascript:;">订单信息</a></li>
				</ul>

				<!--右侧-->
				<ul class="javaex-nav fr">
					<li>
						<a href="./userInfo.html">收货地址</a>
					</li>

					<li>
						<a href="./shopCar.html">购物车</a>
						<!-- <ul class="javaex-nav-dropdown-menu" style="right: 10px;">
							<li><a href="javascript:;">退出当前账号</a></li>
						</ul> -->
					</li>

					<li>
						<a href="./ordersInfo.html">我的订单</a>
					</li>

					<li>
						<a id="loginMsg" href="javascript:;">欢迎您，尊贵的九美阁会员</a>
						<ul id="loginOption" class="javaex-nav-dropdown-menu" style="right: 10px;">
							<li><a href="../login.html">登录</a></li>
							<li><a href="../register.html">注册</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<script>
			function loadLoginMsg() {
				var user = sessionStorage.getItem("user");
				console.log(user);
				if (user != null) {
					$("#loginMsg").text("欢迎你, " + JSON.parse(user).username);
					$("#loginOption").html(`
						<li><a href="./userInfo.html">个人信息</a></li>
						<li><a href="javascript:logout();">退出登录</a></li>
					`);
				}
			}

			function logout() {
				sessionStorage.clear();
				localStorage.clear();
				window.location = '../login.html';
			}
		</script>
	</header>
	<div class="container" style="padding-top: 100px;">
		<fieldset class="javaex-fieldset javaex-fieldset-line">
			<legend>
				<div class="title">
					我的订单
				</div>
			</legend>
		</fieldset>
		<div class="table">
			<div class="javaex-block">
				<table id="table" class="javaex-table td-c-1 td-c-2">
					<thead>
						<tr>
							<th class="javaex-table-num-col">序号</th>
							<th style="width: 200px;">图片</th>
							<th>商品名称</th>
							<th>订单时间</th>
							<th>订单金额</th>
							<th>商品数量</th>
							<th>订单状态</th>
							<th width="210px">操作</th>
						</tr>
					</thead>
					<tbody id="tbody">

					</tbody>
				</table>
			</div>
		</div>
		<div class="pager">
			<div class="javaex-page">
				<ul id="page" class="javaex-pagination"></ul>
			</div>
		</div>
	</div>
</body>
<script>
	var pageSize = 10;
	var totalPages;
	var totalNum;
	var token;
	var user;

	window.onload = function () {
		loadLoginMsg();
		token = localStorage.getItem("token_user")
		user = sessionStorage.getItem("user");
		if(token == null) {
			window.location = "../login.html"
		}
		if (token != null && user == null) {
			getSession() == 500 ? window.location = "../login.html" : '';
		}
		initPage();
	}
	var array;

	function initPage() {
		javaex.loading({
			mode: "manual",
			containerId: "tbody",
			type: "open"
		});
		$.ajax({
			type: "post",
			//后端需要调用的地址
			url: "http://" + getOrdersHost() + "/orders/showForUser",
			dataType: "json",
			data: {
				"context": '',
				"currentPage": 0,
				"pageSize": pageSize,
				"sort": 'date',
				"asc": false
			},
			headers: {
				"token": token,
			},
			timeout: 10000,
			async: true,
			success: function (res) {
				javaex.loading({
					mode: "manual",
					containerId: "tbody",
					type: "open"
				});
				if (res.code == 200) {
					array = new Array();
					var goods = JSON.parse(res.goods);
					var orders = JSON.parse(res.orders);
					var business = JSON.parse(res.business);
					var address = JSON.parse(res.address);
					for (var i = 0; i < goods.length; i++) {
						array.push([goods[i], orders[i], business[i], address[i]]);
					}
					console.log(array)
					initTable(array);
					javaex.render();
					totalPages = res.totalPages;
					totalNum = res.totalNum;
					javaex.page({
						id: "page", // jquery选择器，指定到ul节点
						pageNum: 1, // 默认选中第几页
						pageSize: pageSize, // 每页显示多少条
						totalPages: totalPages, // 总页数
						isShowJumpPage: true, // 是否显示跳页\
						position: "right",
						totalNum: totalNum, // 总条数，不填时，不显示
						callback: function (rtn) {
							if (rtn.pageSize != pageSize) {
								pageSize = rtn.pageSize;
								initPage();
							}
							$.ajax({
								type: "post",
								//后端需要调用的地址
								url: "http://" + getOrdersHost() +
									"/orders/showForUser",
								dataType: "json",
								data: {
									"context": '',
									"currentPage": rtn.pageNum - 1,
									"pageSize": pageSize,
									"sort": 'date',
									"asc": false
								},
								headers: {
									"token": token,
								},
								timeout: 10000,
								async: true,
								success: function (res) {
									console.log(res);
									if (res.code == 200) {
										totalPages = res.totalPages;
										totalNum = res.totalNum;
										array = new Array();
										var goods = JSON.parse(res.goods);
										var orders = JSON.parse(res.orders);
										var business = JSON.parse(res.business);
										var address = JSON.parse(res.address);
										for (var i = 0; i < goods.length; i++) {
											array.push([goods[i], orders[i], business[i],
											address[i]
											]);
										}
										initTable(array);
										javaex.render();
									}

								}
							});
						}
					});
				}
			}
		});
	}

	function initTable(array) {
		$("#tbody").html('');
		for (var i = 0; i < array.length; i++) {
			var html = '';
			html = html + `
					<tr>
						<td>` + array[i][1].ordersId + `</td>
						<td><img width="150px" heigh="150px" src="` + array[i][0].img + `"></td>
						<td>` + array[i][0].name.substr(0, 20) + `</td>
						<td>` + array[i][1].date + `</td>
						<td>` + (array[i][1].num * array[i][0].price) + `</td>
						<td>` + array[i][1].num + `</td>
						`
			var type = array[i][1].type;
			// console.log(type)

			if(array[i][1].status != 0) {
				html = html + `<td>订单已取消</td>
						<td>无需操作</td>
					</tr>
					`;
			} else {
				if (type == 0) {
				html = html + `<td>未付款</td>
				<td><button class="javaex-btn yellow" onclick="pay(` + array[i][1].ordersId + `)">付款</button></td>
					</tr>
					`;
			} else if (type == 1) {
				html = html + `<td>已付款</td>
							<td>无需操作</td>
					</tr>
					`;
			} else if (type == 2) {
				var logitics = JSON.parse(array[i][1].logistics);
				html = html + `<td>已发货</td>
						<td><button class="javaex-btn yellow" onclick="show('` + logitics.no + "','" + logitics.com + `')">查看物流</button>
						<button class="javaex-btn yellow" onclick="confirm(` + array[i][1].ordersId + `)">确认收货</button></td>
					</tr>`;
			} else {
				html = html + `<td>已收货</td>
				<td>无需操作</td>
					</tr>`;
			}
			}
			
			$("#tbody").append(html);
		}
	}

	function confirm(ordersId) {
		javaex.tip({
			content: "数据发送中，请稍后...",
			type: "submit"
		});
		$.ajax({
			url: "http://" + getOrdersHost() + "/orders/confirm",
			data: {
				"ordersId": ordersId,
			},
			headers: {
				"token": localStorage.getItem("token_user")
			},

			dataType: "json",
			type: "post",
			async: false,
			cache: false,
			success: function (res) {
				console.log(res)
				if (res.code == "200") {
					javaex.tip({
						content: "操作成功",
						type: "success"
					});
					// 建议延迟加载
					setTimeout(function () {
						window.location.reload();
					}, 1000);

				} else {
					javaex.tip({
						content: "操作失败",
						type: "error"
					});
				}
			}
		});
	}

	function pay(ordersId) {
		sessionStorage.setItem("ordersId", ordersId);
		window.location = "./pay.html"
	}

	function go(id) {
		var com, no;
		javaex.confirm({
			content: `
				<select id="select" width="200px">
					<option value="" selected>请选择</option>
					<option value="中通快递">中通快递</option>
					<option value="申通快递">申通快递</option>
					<option value="顺丰快递">顺丰快递</option>
					<option value="韵达快递">韵达快递</option>
					<option value="EMS">EMS</option>
				</select>
				<input style="margin-top:10px" type="text" id="text" class="javaex-text" placeholder="请输入快递单号" autocomplete="off" />
				`,
			confirm: function () {
				no = $("#text").val();

				$.ajax({
					url: "http://" + getOrdersHost() + "/orders/addOrdersLogistics",
					data: {
						"ordersId": id,
						"logistics": JSON.stringify({
							"com": com,
							"no": no
						})

					},
					headers: {
						"token": localStorage.getItem("token_user")
					},
					dataType: "json",
					type: "post",
					async: false,
					cache: false,
					success: function (res) {
						console.log(res)
						if (res.code == "orders_200") {
							javaex.tip({
								content: "操作成功",
								type: "success"
							});
							// 建议延迟加载
							setTimeout(function () {
								window.location.reload();
							}, 1000);

						} else {
							javaex.tip({
								content: "操作失败",
								type: "error"
							});
						}
					}
				});
			}
		});
		javaex.select({
			id: "select",
			isSearch: true,
			minWidth: "200",
			// 回调函数
			callback: function (rtn) {
				com = rtn.val;
			}
		});
	}

	function show(logistics, com) {
		console.log(logistics)
		console.log(com)
		javaex.dialog({
			type: "window",
			id: "test", // 指定id，仅当页面存在多个弹出层，需要关闭指定弹出层时才使用
			url: "https://www.kuaidi100.com/chaxun?com=" + com + "&nu=" + logistics, // 页面地址或网址或请求地址
			width: "1000", // 弹出层宽度
			height: "600", // 弹出层高度
			hasBackground: true,
			close: function () {
				console.log("右上角点击X关闭时的回调");
				// 如果你想阻止弹出层关闭，直接 return false; 即可
				// return false;
			}
		});
	}

</script>

</html>